<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8"/>
    <title>修改密码</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <script src="/js/jquery-1.8.3.min.js"></script>
    <script src="/layui-v2.5.4/layui.js"></script>
    <link rel="stylesheet" href="/layui-v2.5.4/css/layui.css">
</head>
<body>

<div class="layui-row" style="padding: 15px;">
    <div class="layui-fluid">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-header">修改密码</div>
                       <div  class="layui-card-body" pad15="">
                        <form class="layui-form" action="" >
                            <div class="layui-form-item">
                                <label class="layui-form-label">当前密码</label>
                                <div class="layui-input-inline">
                                    <input type="password" name="oldPassword" required lay-verify="required" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">新密码</label>
                                <div class="layui-input-inline">
                                    <input type="password" name="password" required lay-verify="pass" autocomplete="off" id="LAY_password" class="layui-input">
                                </div>
                                <div class="layui-form-mid layui-word-aux">6到16个字符</div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">确认新密码</label>
                                <div class="layui-input-inline">
                                    <input type="password" name="repassword" lay-verify="repass"  autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-input-block">
                                    <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                                </div>
                            </div>
                        </form>
                       </div>
                        <script>
                            layui.use('form', function(){
                                var form = layui.form;

                                form.verify({
                                    pass: [
                                        /^[\S]{6,12}$/
                                        ,'密码必须6到12位，且不能出现空格'
                                    ],
                                    repass: function(value, item){ //value：表单的值、item：表单的DOM对象
                                        var newPass=$("#LAY_password").val();
                                        if(newPass!=value){
                                            return '两次密码输入不一致';
                                        }
                                    }
                                });

                                //监听提交
                                form.on('submit(formDemo)', function(data){
                                    layer.msg(JSON.stringify(data.field));
                                    return false;
                                });
                            });
                        </script>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

